<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">心理小游戏</view>
			<view class="nav-subtitle">趣味减压，放松心情</view>
		</view>

		<!-- 游戏列表 -->
		<view class="game-list">
			<!-- 游戏卡片 -->
			<view class="game-card" v-for="(game, index) in games" :key="index" @click="startGame(game.id)">
				<view class="game-icon">
					<u-icon :name="game.icon" color="#6c8eef" size="40"></u-icon>
				</view>
				<view class="game-content">
					<text class="game-title">{{game.title}}</text>
					<text class="game-desc">{{game.description}}</text>
				</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import MuYuVue from 'gamePages/MuYu/MuYu.vue';

	export default {
		data() {
			return {
				games: [
					{
						id: 1,
						title: '电子木鱼',
						description: '敲击木鱼积累功德',
						icon: 'heart-fill'
					},
					{
						id: 2,
						title: '正念冥想',
						description: '简单的正念冥想烦恼丢失',
						icon: 'star-fill'
					},
					{
						id: 3,
						title: '井字棋',
						description: '与电脑来场刺激的博弈吧',
						icon: 'edit-pen-fill'
					}
				]
			}
		},
		methods: {
			startGame(gameId) {
				if(gameId === 1) {
				            // 跳转到电子木鱼页面
				            uni.navigateTo({
				                url: '/gamePages/MuYu/MuYu'
				            });
				        } 
				if(gameId === 2) {
						    // 跳转到正念冥想页面
						    uni.navigateTo({
						        url: '/gamePages/PixelThought/PixelThought'
						     });
						        } 		
				if(gameId === 3) {
				            // 跳转到五子棋页面
				            uni.navigateTo({
				                url: '/gamePages/game/game'
				            });
				        } 		
						
						
						
						
				
			}
		}
	}

</script>

<style lang="scss">
	/* 全局变量 */
	:root {
		--primary-color: #6c8eef;
		--primary-hover: #5a7de0;
		--secondary-color: #f8f9fa;
		--text-color: #2c3e50;
		--border-color: #dee2e6;
		--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
		--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
		--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
		--radius-sm: 16rpx;
		--radius-md: 24rpx;
		--radius-lg: 32rpx;
		--spacing-sm: 16rpx;
		--spacing-md: 32rpx;
		--spacing-lg: 48rpx;
	}

	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 30rpx;
	}

	.nav-bar {
		margin-bottom: 40rpx;
		padding: 0 20rpx;

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 10rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #6c8eef;
				border-radius: 4rpx;
			}
		}

		.nav-subtitle {
			font-size: 26rpx;
			color: #666;
			padding-left: 28rpx;
		}
	}

	.game-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.game-card {
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 24rpx rgba(108, 142, 239, 0.2);
		}
	}

	.game-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(108, 142, 239, 0.1);
		border-radius: 20rpx;
	}

	.game-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.game-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.game-desc {
		font-size: 24rpx;
		color: #666;
	}

	@media screen and (min-width: 690px) {
		.container {
			max-width: 800rpx;
			margin: 0 auto;
		}
	}
</style>